

<template>
  <el-card class="card" shadow="never" style="border-radius: 0px;">
    <div style="margin: 0px 10px 15px 0;">
      <span>依赖信息</span>
    </div>

    <table class="table">
      <tr>
        <td>@vue/cli版本</td>
        <td>{{ devDependencies["@vue/cli-service"] }}</td>
        <td>vue版本</td>
        <td>{{ dependencies["vue"] }}</td>
      </tr>
      <tr>
        <td>vue-router版本</td>
        <td>{{ dependencies["vue-router"] }}</td>
        <td>vuex版本</td>
        <td>{{ dependencies["vuex"] }}</td>
      </tr>
      <tr>
        <td>element-plus</td>
        <td>{{ dependencies["element-plus"] }}</td>
        <td>echarts版本</td>
        <td>{{ dependencies["echarts"] }}</td>
      </tr>
      <tr>
        <td>nprogress</td>
        <td>{{ dependencies["nprogress"] }}</td>
        <td>normalize版本</td>
        <td>{{ dependencies["normalize.css"] }}</td>
      </tr>
      <tr>
        <td>sass版本</td>
        <td>{{ devDependencies["sass"] }}</td>
        <td>sass-loader版本</td>
        <td>{{ devDependencies["sass-loader"] }}</td>
      </tr>
      <tr>
        <td>eslint版本</td>
        <td>{{ devDependencies["eslint"] }}</td>
        <td>fuse.js版本</td>
        <td>{{ dependencies["fuse.js"] }}</td>
      </tr>
      <tr>
        <td>@tinymce/tinymce-vue版本</td>
        <td>{{ dependencies["@tinymce/tinymce-vue"] }}</td>
        <td>tinymce版本</td>
        <td>{{ dependencies["tinymce"] }}</td>
      </tr>
    </table>
  </el-card>
</template>

<script>
import { defineComponent } from 'vue'
import { dependencies, devDependencies } from '../../../../../package.json'
export default defineComponent({
  setup() {
    return {
      dependencies,
      devDependencies
    }
  }
})
</script>

<style lang="scss" scoped>
.table {
  width: 100%;
  color: #666;
  border-collapse: collapse;
  background-color: #fff;

  td {
    position: relative;
    min-height: 20px;
    padding: 9px 15px;
    font-size: 14px;
    line-height: 20px;
    border: 1px solid #e6e6e6;

    &:nth-child(odd) {
      width: 20%;
      text-align: right;
      background-color: #f7f7f7;
    }
  }
}

</style>
